<template>
  <div class="honor">
    <myNav :twoMenu="true"/>

    <div class="honor_container">
        <ul>
            <li v-for="(imgItem,index) in imgArray[currentIndex]" :key="index" @click="openImgView(imgItem)">
                <div>
                    <img :src="require('@/assets/img/'+imgItem.url)"/>
                </div>
                <div>
                    <p>{{imgItem.text}}</p>
                </div>
            </li>
        </ul>

        <div class="pagination">
            <div>总页数 {{imgArray.length}} </div>
            <div>当前是：第{{currentPage}}页</div>
            <div @click="prevPage">上一页</div>
            <div @click="nextPage">下一页</div>
        </div>
    </div>

    <van-overlay :show="show" @click="show = false">
        <div class="wrapper" @click.stop v-if="show">
            <img :src="require('@/assets/img/'+currImg)"/>
        </div>
    </van-overlay>
    <bottom/>
    <contact/>
  </div>
</template>

<script>
import { Overlay  } from 'vant';
import imgArrayData from "../assets/js/honor"; //引入荣誉资质数据
export default {
    name:'honor',
    components:{
        'van-overlay':Overlay
    },
    data(){
        return {
            imgArray:[],
            currentIndex:0,
            currentPage:1,
            show:false,
            currImg:''
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init(){
            this.imgArray = this.sliceArrFn(imgArrayData)
        },
        sliceArrFn(arr){//将一个大数组切割成多个小数组
            let result = []
            let size = 12
            for(let i=0; i<Math.ceil(arr.length/size);i++){
                let start = i * size;
                let end = start + size;
                result.push(arr.slice(start,end))
            }
            return result
        },
        prevPage(){//上一页
            if(this.currentPage == 1) return
            this.currentPage -= 1; 
            this.currentIndex -= 1;
            document.documentElement.scrollTop = 0;
        },
        nextPage(){//下一页
            if(this.currentPage == this.imgArray.length) return
            this.currentPage += 1;
            this.currentIndex += 1;
            document.documentElement.scrollTop = 0;
        },
        openImgView(item){//打开图片预览
            this.currImg = item.url
            this.show = true;            
        },
    },
}
</script>

<style lang="scss" scoped>
img{
    width:100%;
    height:100%;
}
.honor_container{
    ul{
        display:flex;
        padding:0 10px;
        flex-wrap: wrap;
        li{
            width:47%;
            padding-top: 10px;
            &:nth-child(2n){
                padding-left:20px;
            }
            p{
                text-align: center;
                white-space:nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    .pagination{
        text-align:center;
        font-size:14px;
        padding-top: 30px;
        div{
            display: inline-block;
            border:1px solid #ddd;
            padding:4px;
            margin-right:6px;
        }
    }
}
::v-deep .van-overlay{
    z-index:20;
}
.wrapper{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
</style>